// import Vue from 'Vue'
// import store from '@/store';
import './sideFoldPop.scss'
class SideFoldPop {
    /**
     * 
     * @param {Vnode} component  Vue组件
     * @param {Object} params  Vue组件props
     */
    constructor({ component, params = {} }) {
            this.component = component;
            this.params = params;
            this.sideDiv = ''
        }
        //初始化
    init() {
            this.render()
        }
        //展示
    show() {
            this.sideDiv.style.top = '60px'
        }
        //隐藏
    hidden() {
            this.sideDiv.style.top = '-500px'
        }
        //销毁
    destroy() {
        //只存在一个sideFoldPop
        document.body.querySelector('#sideFoldPop') && document.body.removeChild(document.body.querySelector('#sideFoldPop'))
    }
    render() {
        /**
         * @param {DOM} hideBtn  隐藏按钮
         * @param {DOM} innerDiv  滚动层盒子
         * @param {DOM} this.sideDiv  最外层盒子
         * 
         */
        //有则删除
        this.destroy()
        const headerInnerHtml = `<div class="call-center-header pad-x-20"><span><i accessKey="icon" class="el-icon-phone"></i>呼损处理</span><i class="el-icon-close"></i></div>`
            //基本行内样式
        const sideCss = 'position:fixed; top:60px; right:0px; height:500px;width:350px;border: 1px solid #dedede'
        const hideBtn = document.createElement('div');
        const innerDiv = document.createElement('div');
        this.sideDiv = document.createElement('div');
        this.sideDiv.id = 'sideFoldPop'
        this.sideDiv.style.cssText = sideCss;
        this.sideDiv.className = 'side-fold-pop';
        innerDiv.className = 'side-fold-inner';
        hideBtn.innerHTML = headerInnerHtml;
        hideBtn.className = 'side-fold-header'
        document.body.appendChild(this.sideDiv)
            //监听隐藏按钮点击事件
        hideBtn.addEventListener('click', (e) => {
            e.target.className === 'el-icon-close' && this.hidden()
        }, false)
        const Cp = Vue.extend(this.component);
        const vm = new Cp({
            // router: window.$router,
            el: document.createElement('div'),
            // store,
            propsData: this.params,
        })
        this.sideDiv.appendChild(hideBtn);
        this.sideDiv.appendChild(innerDiv);
        innerDiv.appendChild(vm.$el);
    }
}
export default SideFoldPop